<template>
  <div class="p-5">
    <div class="card-box box mt-5">
      <a-button type="primary" @click="openaddbtn">
        <template #icon>
          <PlusOutlined />
        </template>添加食物
      </a-button>

      <a-table :columns="columns" :data-source="newdata.list" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'cover'">
            <a-image :width="100" :src="record.cover" />
          </template>
          <template v-if="column.key === 'weightGram'">
            <a-input-number v-model:value="record.weightGram" addon-after="g" placeholder="请输入"></a-input-number>
          </template>

          <template v-if="column.key === 'role'">
            <a-select v-model:value="record.role" :options="foodtype" style="width:100%" placeholder="请选择"></a-select>
          </template>
          <template v-if="column.key === 'action'">
            <a-button type="link" danger @click="deleteBtn(record.id)">删除</a-button>
          </template>
        </template>
      </a-table>
    </div>
    <selectFood v-model:value="newdata.open" @submit="selectf" />
  </div>
</template>
<script setup>
import { reactive, onMounted, createVNode, watch, ref } from "vue";
import { PlusOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import selectFood from '#/components/selectFood/selectFood.vue';
import {
  foodtype

} from "#/datas/index";




const props = defineProps({
  value: {
    type: Array,
    default: () => [] // 提供默认值，避免 undefined
  }
})
// 1. 初始化回显
const initList = (value) => {

  console.log('回显', value);

  return value.map(item => ({
    id: item?.childFood?.id,
    cover: item?.childFood.cover || '',
    name: item?.childFood?.name || '未知食物',
    weightGram: item.weightGram ?? null,
    role: item.role ?? null,
    // 保留其他必要字段
  }))
};



const emits = defineEmits(['update:value'])

const newdata = reactive({
  open: false,
  list: initList(props.value)
});




watch(
  () => newdata.list,
  (newV) => {
    // 仅当数据变化来自子组件自身操作时，才同步给父组件



    const temp = newV.map(e => ({
      foodId: e.id,
      role: e.role,
      weightGram: e.weightGram,
      name: e.name,
      cover: e.cover
    }));
    emits('update:value', temp);

  },
  { deep: true }
);


const columns = [
  {
    title: "封面",
    dataIndex: "cover",
    align: "center",
    key: "cover",
  },
  {
    title: "名称",
    dataIndex: "name",
    align: "center",
    key: "name",
  },

  {
    title: "重量(克)",
    dataIndex: "weightGram",
    align: "center",
    key: "weightGram",
  },
  {
    title: "食物成分",
    dataIndex: "role",
    align: "center",
    key: "role",
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    key: "action",
  },
];


const openaddbtn = () => {
  newdata.open = true
  console.log('添加', newdata.open);
}




const selectf = (e) => {
  newdata.list = e.map((item) => {
    return {
      ...item,
      weightGram: null,
      role: null
    }
  })
  console.log('选中的数据', newdata.list);

}
</script>
<style scoped lang="less">
.box {
  min-height: 100px;
  // box-sizing: border-box;
  // padding: 20px;
}
</style>
